<template>
	<jk-dialog
		:dialog-state="showDialog"
		:title="`了机-${ruleForm.machineName}`"
		width="900px"
		:confirm-btn-loading="confirmBtnLoading"
		:show-content-loading="showLoading"
		@on-cancel="onVisibleChange(false)"
		@on-confirm="onConfirmBtn"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="140px" :show-message="false">
			<div class="flex-center">
				<el-tag effect="plain" size="large" class="margin-bottom-10" style="font-weight: 700;font-size: 22px;">
					<span class="el-icon-files item-gap"></span>
					<span>{{ ruleForm.machineName }}</span>
				</el-tag>
			</div>
			<!--<el-alert v-show="isRun" type="warning" show-icon :closable="false" class="margin-bottom-20">
				<span>
					注：
					<b style="font-size: 13px;">{{ ruleForm.machineName }}</b>
					尚未停机，为保证产量准确，建议停机后再了机！
				</span>
			</el-alert>-->
			<jk-divider-card>
				<el-row class="flex-start-center-wrap">
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="品种">
							<span class="read-only-2">{{ ruleForm.productName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="批号">
							<span class="read-only-2">{{ ruleForm.batchCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).inputName">
							<span class="read-only-2">{{ ruleForm.inputTubeColorList && ruleForm.inputTubeColorList.length ? ruleForm.inputTubeColorList.map(x => x.name).join(',') : '无' }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" :label="getColorInfoByProcess(ruleForm.processCode).outName">
							<span class="read-only-2">{{ ruleForm.outputTubeColorList && ruleForm.outputTubeColorList.length ? ruleForm.outputTubeColorList.map(x => x.name).join(',') : '无' }}</span>
						</el-form-item>
					</el-col>
					<!--<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="生产订单">
							<span class="read-only-2">{{ ruleForm.productOrderCode }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="生产通知单">
							<span class="read-only-2">{{ ruleForm.prdNoticeCode }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-0" label="区域">
							<span class="read-only-2">{{ ruleForm.workshopName }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<!--<el-divider>开台信息</el-divider>
				<el-row class=flex-start-center-wrap>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="开台产量表数">
							<span class="read-only-2">{{ ruleForm.startOutput }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="开台能耗表数">
							<span class="read-only-2">{{ ruleForm.startElectricEnergy }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="开台锭数">
							<span class="read-only-2">{{ ruleForm.openSpinCount }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class=flex-start-center-wrap>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="已报工产量(M)">
							<span class="read-only-2">{{ ruleForm.reportOutput }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="已实时产量(kg)">
							<span class="read-only-2">{{ ruleForm.reportQty }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="已报工耗电量">
							<span class="read-only-2">{{ ruleForm.reportElectricEnergy }}</span>
						</el-form-item>
					</el-col>
				</el-row>-->
			</jk-divider-card>
			<jk-divider-card title="仪表信息" class="margin-top-30">
				<el-row class="flex-start-center-wrap">
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="开台时间">
							<span class="read-only-2">{{ ruleForm.startTime }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="了机时间" prop="endTime">
							<div class="flex-start-center">
								<el-date-picker v-model="ruleForm.endTime" clearable type="datetime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="了机时间" @change="onTimeChange" />
								<stopRecordBar
									:form-data="ruleForm"
									@on-confirm="onConfirmBtnOfStopRecordBar"
								></stopRecordBar>
							</div>
						</el-form-item>
					</el-col>
					<!--<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="了机班次" prop="endScheduleShiftName">
							<jk-input v-model="ruleForm.endScheduleShiftName" readonly placeholder=""></jk-input>
						</el-form-item>
					</el-col>-->
					<!--络筒不采集米数，不做必填-->
					<el-col v-show="ruleForm.processCode ? ruleForm.processCode.toUpperCase() === 'LT' : false" :span="12">
						<el-form-item v-if="ruleForm.processCode.toUpperCase() === 'LT'" class="margin-bottom-10" label="了机表数(M)">
							<jk-number-input v-model="ruleForm.endOutput" placeholder="了机表数(M)" />
						</el-form-item>
					</el-col>
					<el-col v-show="ruleForm.processCode ? ruleForm.processCode.toUpperCase() !== 'LT' : false" :span="12">
						<el-form-item v-if="ruleForm.processCode.toUpperCase() !== 'LT'" class="margin-bottom-10" label="了机表数(M)" prop="endOutput">
							<jk-number-input v-model="ruleForm.endOutput" placeholder="了机表数(M)" />
						</el-form-item>
					</el-col>
					<!--<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="产量系统表数(M)">
							<span class="read-only-2">{{ ruleForm.endSystemOutput }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="了机表数(kg)">
							<jk-number-input v-model="ruleForm.endOutputKg" placeholder="了机表数(kg)" />
						</el-form-item>
					</el-col>
					<!--<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="产量系统表数(kg)">
							<span class="read-only-2">{{ ruleForm.endSystemOutputKg }}</span>
						</el-form-item>
					</el-col>-->
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="能耗表数" prop="endElectricEnergy1">
							<jk-number-input v-model="ruleForm.endElectricEnergy" placeholder="能耗表数" />
						</el-form-item>
					</el-col>
					<!--<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="能耗系统表数">
							<span class="read-only-2">{{ ruleForm.endSystemElectricEnergy }}</span>
						</el-form-item>
					</el-col>-->
				</el-row>
			</jk-divider-card>
		</el-form>

	</jk-dialog>
</template>

<script>
    import { clearRedundancyKey, formatTime, tipsBar } from '../../../../utils/jk/jk-tool';
    import { workforcemanagementScheduleShiftByTime } from '../../../../api/schedule/empReplacePost';
    import {
        productionPrdNoticeMachineChangeGetMachineData,
        productionPrdNoticeMachineCloseClose,
        productionPrdNoticeMachineCloseRunState
    } from '../../../../api/production/xsOpen';
    import getTubeColor from '../../foreSpinPrd/foreSpinningPlan/components/form-box/get-tube-color';
    import stopRecordBar from './stopRecordBar';
    export default {
        components: {
            stopRecordBar
        },
        mixins: [getTubeColor],
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            selectMachineItem: {
                type: Object,
                default() {
                    return {};
                }

            }
        },
        data() {
            return {
                isRun: false,
                showLoading: false,
                activeName: '1',
                showDialog: false,
                confirmBtnLoading: false,
                ruleForm: {
                    'processCode': '',
                    'endElectricEnergy': null,
                    'endScheduleShiftId': null,
                    'endScheduleShiftName': '',
                    'endSystemElectricEnergy': null,
                    'endTime': '',
                    'prdNoticeMachineChangeId': null,
                    'endOutput': null,
                    'endSystemOutput': null,
                    'endOutputKg': null,
                    'endSystemOutputKg': null
                },
                rules: {
                    endTime: [{ required: true, trigger: 'change' }],
                    endScheduleShiftName: [{ required: true, trigger: 'change' }],
                    endOutput: [{ required: true, trigger: 'change' }],
                    endElectricEnergy: [{ required: true, trigger: 'change' }],
                    typeId: [{ required: true, trigger: 'change' }]
                }
            };
        },
        methods: {
            onConfirmBtnOfStopRecordBar(item) {
                if (item && Object.keys(item).length) {
                    this.$set(this.ruleForm, 'endTime', JSON.parse(JSON.stringify(item)).systemEndDateTime);
                    this.onTimeChange();
                } else {
                    tipsBar(this, 'custom', 'warning', '请选择!');
                }
            },
            onTimeChange(e) {
                if (e) {
                    if (Date.parse(e) > Date.parse(this.ruleForm.startTime)) {
                        this.$set(this.ruleForm, 'endScheduleShiftId', null);
                        this.$set(this.ruleForm, 'endScheduleShiftName', '');
                        this.getScheduleShiftForTimeRequest();
                        this.getGatherMachineDataRequest();
                    } else {
                        tipsBar(this, 'custom', 'warning', '了机时间必须大于开始时间！');
                        this.$set(this.ruleForm, 'endScheduleShiftId', null);
                        this.$set(this.ruleForm, 'endScheduleShiftName', '');
                        this.$set(this.ruleForm, 'endTime', '');

                        this.setGatherData({});
                    }
                }
            },
            getScheduleShiftForTimeRequest() {
                if (this.ruleForm.workshopId && this.ruleForm.endTime) {
                    /* return workforcemanagementScheduleShiftByTime({
                        startTime: this.ruleForm.endTime,
                        workshopId: this.ruleForm.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            let resData = res.data.res;
                            if (!resData) {
                                tipsBar(this, 'custom', 'warning', '当前时间未排班，请排班后再操作！');
                                resData = { shiftId: null, shiftName: '' };
                            }
                            this.$set(this.ruleForm, 'endScheduleShiftId', resData.shiftId);
                            this.$set(this.ruleForm, 'endScheduleShiftName', resData.shiftName);
                        }
                    });*/
                }
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    if (valid) {
                        this.saveRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            saveRequest() {
                this.confirmBtnLoading = true;
                const params = {
                    'endElectricEnergy': this.ruleForm.endElectricEnergy,
                    'endOutput': this.ruleForm.endOutput,
                    // 'endScheduleShiftId': this.ruleForm.endScheduleShiftId,
                    'endSystemElectricEnergy': this.ruleForm.endSystemElectricEnergy,
                    'endSystemOutput': this.ruleForm.endSystemOutput,
                    'endTime': this.ruleForm.endTime,
                    'endSystemTime': this.ruleForm.endSystemTime,
                    'prdNoticeMachineChangeId': this.ruleForm.prdNoticeMachineChangeId,

                    'endOutputKg': this.ruleForm.endOutputKg,
                    'endSystemOutputKg': this.ruleForm.endSystemOutputKg
                };
                productionPrdNoticeMachineCloseClose(params).then(res => {
                    this.confirmBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$emit('on-confirm');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
            },
            setGatherData(item = {}) {
                // 已报工的产量和能耗
                this.$set(this.ruleForm, 'reportElectricEnergy', item.reportElectricEnergy || 0);
                this.$set(this.ruleForm, 'reportOutput', item.reportOutput || 0);
                this.$set(this.ruleForm, 'reportQty', item.reportQty || 0);
                // 开台能耗表数，默认等于采集到的实时能耗
                this.$set(this.ruleForm, 'endElectricEnergy', item.currentElectricEnergy || 0);
                this.$set(this.ruleForm, 'endSystemElectricEnergy', item.currentElectricEnergy || 0);
                // 开台产量表数，默认等于采集到的实时产量
                this.$set(this.ruleForm, 'endOutput', item.currentOutput || 0);
                this.$set(this.ruleForm, 'endSystemOutput', item.currentOutput || 0);

                this.$set(this.ruleForm, 'endOutputKg', item.currentOutputKg || 0);
                this.$set(this.ruleForm, 'endSystemOutputKg', item.currentOutputKg || 0);
            },
            // 获取指定机台采集的仪表数据
            getGatherMachineDataRequest() {
                if (this.ruleForm.endTime && this.ruleForm.machineCode) {
                    return productionPrdNoticeMachineChangeGetMachineData({
                        machineId: this.ruleForm.machineId,
                        machineCode: this.ruleForm.machineCode,
                        prdNoticeMachineChangeId: this.selectMachineItem.id,
                        selectDateTime: this.ruleForm.endTime
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.setGatherData(res.data.res);
                        }
                    });
                }
            },
            getMachineRunStateRequest() {
                if (!this.ruleForm.machineCode) return false;
                return productionPrdNoticeMachineCloseRunState({
                    machineCode: this.ruleForm.machineCode
                }).then(res => {
                    if (res.data.status === 200) {
                        this.isRun = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                await this.getMachineRunStateRequest();
                await this.getScheduleShiftForTimeRequest();
                await this.getGatherMachineDataRequest();
                this.$nextTick(() => {
                    this.$refs.ruleForm.clearValidate();
                });
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.ruleForm = clearRedundancyKey(this.selectMachineItem);
                this.$set(this.ruleForm, 'prdNoticeMachineChangeId', this.selectMachineItem.id);
                this.$delete(this.ruleForm, 'id');
                this.$set(this.ruleForm, 'endSystemTime', formatTime(Date.now()));
                this.$set(this.ruleForm, 'endTime', formatTime(Date.now()));
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
